<template>
  <!-- 饼图库存 -->
  <div class="libs">
    <div class="use-charts">
      <div class="header">
        <p class="subject">库存使用情况</p>
      </div>
      <div ref="pieChart1" style="width: 562px; height: 560px" />
    </div>
    <div class="libs-charts">
      <div class="header">
        <p class="subject">库存使用情况</p>
      </div>
      <div ref="pieChart2" style="width: 1444px; height: 560px" />
    </div>
  </div>
</template>

<script>
import { LeftPie } from '@/api/home'
export default {
  async created() {
    await LeftPie()
    this.echartsInit()
    // console.log(data)
  },
  methods: {
    echartsInit() {
      const myChart1 = this.$echarts.init(this.$refs.pieChart1)
      const option1 = {
      }
      const myChart2 = this.$echarts.init(this.$refs.pieChart1)
      const option2 = {
      }
      myChart1.setOption(option1)
      myChart2.setOption(option2)
    }
  }
}
</script>

<style lang="scss">
.libs {
  margin-top: 20px;
  display: flex;
  .use-charts {
    width: 30%;
    height: 354px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    border-radius: 12px;
    padding: 25px;
    margin-right: 30px;
  }
  .libs-charts {
    width: 70%;
    height: 354px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    border-radius: 12px;
    padding: 25px;
  }
  .subject {
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #332929;
    line-height: 22px;
  }
}
</style>
